<template>
  <div id="songlist">
    <el-row type="flex" justify="center">
      <el-col :xs="14" :sm="14" :md="14" :lg="14" :xl="14">
        <router-link tag="div" to="/homepage/contents/boutiquePlaylist"
          v-show="hdShow"
          class="songlist-hd"
          :style="{
            backgroundImage:
              'url(' + $store.state.songList[0].coverImgUrl + ')',
          }"
        >
          <div class="cover"></div>
          <div class="images">
            <img v-lazy="$store.state.songList[0].coverImgUrl" alt="" />
          </div>
          <div class="desc">
            <div class="boutique-list">
              <Icon type="ios-ribbon-outline" class="icon" />精品歌单
            </div>
            <p class="name">{{ $store.state.songList[0].name }}</p>
            <p class="copywr">{{ $store.state.songList[0].copywriter }}</p>
          </div>
        </router-link>
        <el-row class="s-sort" type="flex" justify="space-between">
          <div class="left">
            <div class="all-list-btn" @click="allBtnShow===false?allBtnShow=true:allBtnShow=false">
              {{$store.state.tagName}}<i class="el-icon-arrow-right"></i>
            </div>
            <div class="all-sort" v-show="allBtnShow">
              <p class="all-inner-btn" @click="songListchange('全部')">
                全部歌单
              </p>
              <el-divider></el-divider>
              <div class="all-btn">
                <ul>
                  <li>
                    <div class="all-left">
                      <Icon :type="icons[0]" class="icos" /><span class="word"
                        >语种</span
                      >
                    </div>
                    <div class="all-right">
                      <li
                        v-for="(item, index) in sort.sub"
                        :key="index"
                        v-if="item.category === 0"
                        @click="songListchange(item.name)"
                        
                      >
                       <p :class="{active:item.name===$store.state.tagName}">{{ item.name }}</p>
                      </li>
                    </div>
                  </li>
                  <li>
                    <div class="all-left">
                      <Icon :type="icons[1]" class="icos" /><span class="word"
                        >风格</span
                      >
                    </div>
                    <div class="all-right">
                      <li
                        v-for="(item, index) in sort.sub"
                        :key="index"
                        v-if="item.category === 1"
                        @click="songListchange(item.name)"
                        
                      >
                       <p :class="{active:item.name===$store.state.tagName}">{{ item.name }}</p>
                      </li>
                    </div>
                  </li>
                  <li>
                    <div class="all-left">
                      <Icon :type="icons[2]" class="icos" /><span class="word"
                        >场景</span
                      >
                    </div>
                    <div class="all-right">
                      <li
                        v-for="(item, index) in sort.sub"
                        :key="index"
                        v-if="item.category === 2"
                        @click="songListchange(item.name)"
                        
                      >
                       <p :class="{active:item.name===$store.state.tagName}">{{ item.name }}</p>
                      </li>
                    </div>
                  </li>
                  <li>
                    <div class="all-left">
                      <Icon :type="icons[3]" class="icos" /><span class="word"
                        >情感</span
                      >
                    </div>
                    <div class="all-right">
                      <li
                        v-for="(item, index) in sort.sub"
                        :key="index"
                        v-if="item.category === 3"
                        @click="songListchange(item.name)"
                        
                      >
                       <p :class="{active:item.name===$store.state.tagName}">{{ item.name }}</p>
                      </li>
                    </div>
                  </li>
                  <li>
                    <div class="all-left">
                      <Icon :type="icons[4]" class="icos" /><span class="word"
                        >主题</span
                      >
                    </div>
                    <div class="all-right">
                      <li
                        v-for="(item, index) in sort.sub"
                        :key="index"
                        v-if="item.category === 4"
                        @click="songListchange(item.name)"
                        
                      >
                        <p :class="{active:item.name===$store.state.tagName}">{{ item.name }}</p>
                      </li>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="right">
            <el-row type="flex" align="middle">
              <li
                v-for="(item, index) in sortHot"
                :key="index"
                @click="songListchange(item.name)"
                :class="{active:item.name===$store.state.tagName}"
              >
                {{ item.name }}
              </li>
            </el-row>
          </div>
        </el-row>
        <div class="container">
          <ul class="songlist-list">
            <li v-for="(item, index) in $store.state.songAllList" :key="index" @click=" skip(item)">
              <div class="images">
                <div class="userdesc">
                  <i class="el-icon-user"></i>
                  <span class="nowrap">{{ item.creator.nickname }}</span>
                  <div class="ico">
                    <img
                      v-lazy="
                        item.creator.avatarDetail !== null
                          ? item.creator.avatarDetail.identityIconUrl
                          : ''
                      "
                      alt=""
                    />
                  </div>
                </div>
                <img v-lazy="item.coverImgUrl" alt="" />
                <div class="play-icon">
                  <img src="../ranklist/images/play.png" alt="" />
                </div>
                <div class="playcount">
                  <Icon type="ios-play-outline" class="play-icons" />{{
                    item.playCount > 10000
                      ? Math.floor(item.playCount / 10000) + "万"
                      : item.playCount
                  }}
                </div>
              </div>
              <p class="name">{{ item.name }}</p>
            </li>
          </ul>
          <el-pagination
          class="page"
                  background
                  @prev-click="handleCurrentChange"
                  @next-click="handleCurrentChange"
                  @current-change="handleCurrentChange"
                  layout="prev, pager, next"
                  :page-size="100"
                  :total="1000"
                >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "songlist",
  data() {
    return {
      sort: {},
      sortHot: [],
      hdShow: true,
      allBtnShow:false,
      icons: [
        "ios-globe-outline",
        "ios-briefcase-outline",
        "ios-cafe-outline",
        "ios-happy-outline",
        "ios-apps-outline",
      ],
    };
  },
  created() {
    //歌单分类
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/playlist/catlist?timetamp=" +
        new Date().getTime(),
    }).then((res) => {
      this.sort = res.data;
      console.log(res.data);
    });
    //热门歌单分类
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/playlist/hot?timetamp=" + new Date().getTime(),
    }).then((res) => {
      this.sortHot = res.data.tags;
      console.log(res.data);
    });
    //默认请求全部歌单
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/top/playlist?timetamp=" + new Date().getTime(),
      params: {
        limit: 100,
      },
    }).then((res) => {
      if (res.data.playlists.length > 0) {
        this.$store.commit("saveSongAllList", res.data.playlists);
        console.log("全部", res.data);
      } else {
        this.$message({
          type: "error",
          message: "分类内容不存在",
          showClose: true,
        });
      }
    });
    //默认请求精品歌单
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/top/playlist/highquality?timetamp=" +
        new Date().getTime(),
      params: {
        limit: 100,
      },
    }).then((res) => {
      this.$store.commit("saveSongList", res.data.playlists);
      console.log(res.data);
    });
    this.axios({
      method: "get",
      withCredentials: true,
      url:
        "https://music.hzbiz.net/top/playlist?timetamp=" + new Date().getTime(),
      params: {
        limit: 100,
        cat: "华语",
      },
    }).then((res) => {
      //   this.$store.commit("saveSongList", res.data.playlists);
      console.log("歌单", res.data);
    });
  },
  methods: {
    //跳转歌单详情
     skip(item) {
      this.$router.push({
        path: "/homepage/contents/rankdetail",
        query: {
          detail: item,
          id: item.id,
        },
      });
    },
    //分页
    handleCurrentChange(val){
      let tag = ""
      if(this.$store.state.tagName==="全部歌单"){
        tag = "全部"
      }else{
        tag = this.$store.state.tagName
      }
      this.axios({
        method: "get",
        withCredentials: true,
        url:
          "https://music.hzbiz.net/top/playlist?timetamp=" +
          new Date().getTime(),
        params: {
          limit: 100,
          cat: tag,
          offset:(val-1)*100
        },
      }).then(res=>{
        this.$store.commit("saveSongAllList", res.data.playlists);
      })
    },
    //歌单列表
    songListchange(tag) {
      this.allBtnShow = false
      this.axios({
        method: "get",
        withCredentials: true,
        url:
          "https://music.hzbiz.net/top/playlist/highquality?timetamp=" +
          new Date().getTime(),
        params: {
          limit: 100,
          cat: tag,
        },
      }).then((res) => {
        this.hdShow = res.data.playlists.length > 0;
        if (res.data.playlists.length > 0) {
          this.$store.commit("saveSongList", res.data.playlists);
          
          console.log("精品", res.data);
        } else {
          //   this.$message({
          //     type: "error",
          //     message: "分类精品内容不存在",
          //     showClose: true,
          //   });
        }
      });

      this.axios({
        method: "get",
        withCredentials: true,
        url:
          "https://music.hzbiz.net/top/playlist?timetamp=" +
          new Date().getTime(),
        params: {
          limit: 100,
          cat: tag,
        },
      }).then((res) => {
        if (res.data.playlists.length > 0) {
          this.$store.commit("saveSongAllList", res.data.playlists);
          if (tag === "全部") {
            this.$store.commit("saveTagName", "全部歌单");
          } else {
            this.$store.commit("saveTagName", tag);
          }
          console.log("全部", res.data);
        } else {
          this.$message({
            type: "error",
            message: "分类内容不存在",
            showClose: true,
          });
        }
      });
    },
  },
};
</script>

<style  scoped>
.songlist-hd {
  height: 170px;
  width: 100%;
  border-radius: 10px;
  padding: 15px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  background: none;
  overflow: hidden;
  cursor: pointer;
}
.songlist-hd::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: center;
  filter: blur(40px);
  /* z-index: -1; */
}
.songlist-hd .images {
  height: 140px;
  width: 140px;
  overflow: hidden;
  border-radius: 5px;
  z-index: 2;
}
.songlist-hd .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.songlist-hd .desc {
  width: 80%;
  z-index: 2;
  margin-left: 10px;
}
.songlist-hd .desc .boutique-list {
  font-size: 16px;
  color: #e7aa5a;
  border: 1px solid #e7aa5a;
  width: 108px;
  height: 30px;
  border-radius: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.songlist-hd .desc .boutique-list .icon {
  font-size: 18px;
  margin-right: 3px;
}
.songlist-hd .desc .name {
  color: #ffffff;
  font-size: 18px;
  margin-top: 30px;
}
.songlist-hd .desc .copywr {
  color: #a1918c;
  margin-top: 3px;
}
.s-sort {
  margin-top: 27px;
  margin-bottom: 16px;
}
.s-sort .right li {
  margin-right: 10px;
  cursor: pointer;
  padding: 3px 6px;
  height: 22px;
  border-radius: 11px;
  line-height: 16px;
}
.s-sort .right li:hover {
  color: #000;
}
.s-sort .all-list-btn {
  width: 105px;
  font-size: 16px;
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: 26px;
  border-radius: 13px;
  padding: 0 10px;
  cursor: pointer;
  text-align: center;
  line-height: 26px;
}
.s-sort .all-list-btn:hover {
  background-color: #f5f5f5;
}
.songlist-list {
  display: flex;
  flex-wrap: wrap;
}
.songlist-list li {
  width: 184px;
  cursor: pointer;
}
.songlist-list li:not(:nth-child(5n)) {
  margin-right: 12px;
}
.songlist-list li .images {
  height: 184px;
  overflow: hidden;
  border-radius: 5px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.songlist-list li .images .play-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  transition: all 0.6s;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.songlist-list li .images:hover .play-icon {
  opacity: 1;
}
.songlist-list li .images .play-icon img {
  width: 65%;
  margin-left: 5px;
}
.songlist-list li .images .playcount {
  position: absolute;
  right: 5px;
  top: 5px;
  color: #ffffff;
  display: flex;
  justify-content: center;
}
.songlist-list li .images .playcount .play-icons {
  margin-right: 3px;
  font-size: 16px;
}
.songlist-list li .name {
  margin: 10px 0 15px;
}
.songlist-list .userdesc {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  color: #ffffff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
  padding: 5px;
}
.songlist-list .userdesc .ico {
  width: 15px;
  height: 15px;
  overflow: hidden;
}
.songlist-list .userdesc > span {
  margin: 0 3px;
}
.s-sort .left {
  position: relative;
}
.s-sort .left .all-sort {
  margin-top: 5px;
  background-color: #ffffff;
  z-index: 10;
  position: absolute;
  border-radius: 5px;
  width: 745px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.s-sort .left .all-sort .all-inner-btn {
  padding: 20px;
  cursor: pointer;
  padding-left: 31px;
}
.s-sort .left .all-sort .all-inner-btn:hover {
  color: #ec4141;
}
.s-sort .el-divider {
  margin: 0;
}
.s-sort .left .all-btn {
  margin-top: 20px;
  margin-bottom: 120px;
  padding: 0 17px;
}
.s-sort .left .all-btn ul > li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 10px;
}
.s-sort .left .all-btn .all-left .icos {
  font-size: 30px;
  margin-right: 5px;
}
.s-sort .left .all-btn .all-left {
  width: 15%;
}
.s-sort .left .all-btn .all-left .word {
  color: #cfcfcf;
}
.s-sort .left .all-btn .all-right {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 85%;
}
.s-sort .left .all-btn .all-right li{
  width: 70px;
  padding: 5px;
  margin-right: 28px;
}
.s-sort .left .all-btn .all-right li p{
  padding: 0 10px;
  height: 30px;
  text-align: left;
  line-height: 30px;
  border-radius: 15px;
  white-space: nowrap;
  cursor: pointer;
}
.s-sort .left .all-btn .all-right li p:hover {
  color: #ec4141;
}
.s-sort .right li.active {
  color: #ec4141;
  background-color: #FDF5F5;
}
.s-sort .left .all-btn .all-right li p.active{
  color: #ec4141;
  background-color: #FDF5F5;
}
.page{
  width: 400px;
  margin: 0 auto;
  margin-top: 30px;
}
</style>